<template>
  <div class="oe-menu">
    <div class="oe-menu-container">
      <info-top @toggleCollapsed="toggleCollapsed" v-if="!$route.meta.noMenu"></info-top>
      <div class="oe-menu-bar" :class="{ 'close-bar': collapsed }" v-if="!$route.meta.noMenu">
        <a-menu
          :defaultSelectedKeys="defaultKey"
          :defaultOpenKeys="defaultOpen"
          mode="inline"
          theme="dark"
          :inlineCollapsed="collapsed"
        >
          <template v-for="menu in menuList">
            <a-menu-item :key="menu.Path" v-if="!menu.secondList.length">
              <i :class="['iconfont', 'title-color', ' oe-menu-span', menu.Icon]" />
              <router-link
                :to="{ name: menu.Path }"
                class="oe-menu-title oe-menu-first" 
              >{{ menu.Name }}</router-link>
            </a-menu-item>
            <a-sub-menu :key="menu.Path" v-if="menu.secondList.length">
              <span slot="title" class="oe-menu-span">
                <i :class="['iconfont', 'title-color', menu.Icon]" />
                <span class="oe-menu-title">{{ menu.Name }}</span>
              </span>
              <a-menu-item :key="item.Path" v-for="item in menu.secondList">
                <router-link :to="{ name: item.Path }">{{ item.Name }}</router-link>
              </a-menu-item>
            </a-sub-menu>
          </template>
          <a-sub-menu key="info">
            <span slot="title" class="oe-menu-span">
              <i class="iconfont icon-solid-person title-color" /> 
              <span class="oe-menu-title">个人信息</span>
            </span>
            <a-menu-item key="baseInfo">
              <router-link :to="{ name: 'baseInfo' }">基本信息</router-link>
            </a-menu-item>
          
            <!-- <a-menu-item key="updatePwd">
              <router-link :to="{ name: 'updatePwd' }">修改密码</router-link>
            </a-menu-item> -->
          </a-sub-menu>
        </a-menu>
      </div>
      <div :class="!$route.meta.noMenu ? 'oe-menu-content' : 'oe-paper-contianer'">
        <a-locale-provider :locale="locales.zh_CN">
          <router-view />
        </a-locale-provider>
      </div>
    </div>
  </div>
</template>

<script>
const { locales } = window.antd;
import infoTop from '@/components/info-top/index.vue';
export default {
  name: 'menu',
  components: {
    infoTop
  },
  data() {
    return {
      locales,
      // 是否展开或者关闭
      collapsed: false,
      // 用户版本
      level: 3,
      //默认的选择数组
      defaultKey: [],
      // 默认展开的item
      defaultOpen: [],
      menuList: [],
      // zhCN, //中文包
      // 路由列表
      defaultMenuList: {
        role: [
          {
            path: 'roleManagement',
            secondList: ['roleManagement', 'memManagement', 'carteManagement']
          },
           {
            path: 'menuRole',
            secondList: ['menuRole']
          }
        ],
        exam: [
          {
            path: 'examList',
            secondList: [
              'examList',
              'examManagement',
              'addExam',
              'studentManage',
              'reviewTeacher',
              'examAnalysis',
              'pushExam',
              'testPaper',
              'unsubmittedList',
              'approvaledList',
              'notApprovaledList',
              'proctorTeacher',
              'examMonitorStu'
            ]
          },
          {
            path: 'categoryManagement',
            secondList: ['categoryManagement']
          },
          {
            path: 'examRoomManagement',
            secondList: ['examRoomManagement']
          },
          {
            path: 'ruleManage',
            secondList: ['ruleManage','ruleLook']
          }
        ],
        approval: [
          {
            path: 'approvalManagement',
            secondList: ['approvalManagement', 'approvalPaper']
          }
        ],
        invigilate: [
          {
            path: 'invigilateManagement',
            secondList: ['invigilateManagement']
          }
        ],
        question: [
          { path: 'questionManagement', secondList: ['questionManagement', 'addQuestion', 'newQuestion'] },
          {
            path: 'recycleBin',
            secondList: ['recycleBin']
          }
        ],
        basicData: [
          {
            path: 'studentManagement',
            secondList: ['studentManagement']
          },
          {
            path: 'facultyManagement',
            secondList: ['facultyManagement']
          },
          {
            path: 'teacherManagement',
            secondList: ['teacherManagement']
          },
          {
            path: 'majorManagement',
            secondList: ['majorManagement']
          },
          {
            path: 'gradeManagement',
            secondList: ['gradeManagement']
          },
          {
            path: 'classManagement',
            secondList: ['classManagement']
          },
          {
            path: 'schoolManagement',
            secondList: ['schoolManagement']
          }
        ],
        statisticsAnalysis: [
          {
            path: 'todayExam',
            secondList: ['todayExam']
          }
        ],
        info: [
          {
            path: 'baseInfo',
            secondList: ['baseInfo']
          },
          {
            path: 'updatePwd',
            secondList: ['updatePwd']
          }
        ]
      },
      isShowManager: false,
      isShowStudent: false
    };
  },
  watch: {
    $route: {
      handler(newVal) {
        // 维护路由高亮
        for (const key in this.defaultMenuList) {
          let flag = false;
          for (let i = 0; i < this.defaultMenuList[key].length; i++) {
            flag = this.defaultMenuList[key][i].secondList.includes(newVal.name);
            if (flag) {
              this.defaultOpen = [];
              this.defaultKey = [];
              this.defaultOpen.push(key);
              this.defaultKey.push(this.defaultMenuList[key][i].path);
              break;
            }
          }
        }
      },
      immediate: true
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getUserMenu();
    });
  },
  methods: {
    toggleCollapsed(val) {
      this.collapsed = val;
    },
    getUserMenu() {
      this.$http.post('/api/common/localstorage/getUserMenu').then((rst) => {
        if (rst.code == 1) {
          this.menuList = [];
          this.menuList = rst.list;
          this.isShowManager = rst.isShowManager;
          this.isShowStudent = rst.isShowStudent;
        } else {
          this.$message.error(rst.msg);
        }
      });
    }
  }
};
</script>
